<template>
  <div class="app-container">
    <!--地图div-->
    <div class="mapDiv" v-loading="loading">
      <SpatialDisStaMap @selectProvinceInfo="selectProvinceInfo"></SpatialDisStaMap>
    </div>
    <!--index页面div-->
    <div id="spatialDisStaMapDiv" class="ol-popup">
      <!--echarts-->
      <div id="spatialDisSta-echartDiv" class="map-echartDiv" v-show="showEchartBool"></div>
    </div>
  </div>
</template>

<script setup name="spatialDisSta">
//地图
import SpatialDisStaMap from '@/map/disasterVulnerManagement/compreVisualAnalysis/spatialDisSta/map.vue';
import { queryByProvince } from "@/api/map/disasterVulnerManagement/compreVisualAnalysis/spatialDisSta.js";
import * as echarts from 'echarts';
const router = useRouter();

/*const data = reactive({

});
const {

} = toRefs(data);*/
const loading = ref(false);
const showEchartBool = ref(false);//是否显示图表
var selectProvince =null;
//选中省份
const selectProvinceInfo = (province) => {
  if(province){
    loading.value = true;
    //空间分布按省统计
    queryByProvince(province).then((response) => {
      nextTick(() => {
        loading.value = false;
        let result = response.data;
        // console.log("result");
        // console.log(result);
        if(result){
          let data = [
              {value: result.buildingAreaCount, name: '建筑物'},
              {value: result.lifeLineCount, name: '生命线工程'},
              {value: result.majorProject, name: '重大工程设施'},
          ];
          showEchartBool.value = true;
          showEchartsDiv(province,data);
        }
      });
    }).catch(err => {
      console.log(err);
      loading.value = false;
    });
  }else{//取消选中
    // 图表销毁
    if (thisChart!=null) {
      thisChart.dispose();
      thisChart = null;
    }
    showEchartBool.value = false;
  }
}

var thisChart = null;//图表对象
//根据省份显示图表
const showEchartsDiv = (province,data) => {
  // 图表销毁
  if (thisChart!=null) {
    thisChart.dispose();
    thisChart = null;
  }
  selectProvince=province;
  let chartDom = document.getElementById("spatialDisSta-echartDiv");
  thisChart = echarts.init(chartDom, 'light');

  let option = {
    title: {
      text: province,
      subtext: '易损性数据空间分布统计',
      textStyle: {
        color: '#235894'
      },
      x:'center',
      y:'top',
    },
    grid: {
      show: false,
      top: 20,
      left: 20,
      right: 20,
      bottom:20,
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {show: true}
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      bottom: 20,
      data: ['建筑物', '生命线工程', '重大工程设施']
    },
    series: [{
      name: '易损性数据空间分布统计',
      type: 'pie',
      radius: ['15%', '35%'],
      selectedMode: 'single',
      selectedOffset: 30,
      clockwise: true,
      label: {
        fontSize: 18,
        color: '#235894',
        formatter: function (param) {
          let text = param.data.name;
          return text + '\n' + '(' + param.percent + '%)';
          // if (text.length < 15) {
          //   return text + '\n' + param.data.value + '\n' + '(' + param.percent + '%)'
          // } else {
          //   return text.substring(0, 15) + '...' + '\n' + param.data.value + '\n' + '(' + param.percent + '%)'
          // }
        },
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        lineStyle: {
          color: '#235894'
        }
      },
      data: data
    }]
  };
  thisChart.setOption(option);
  thisChart.resize();
  //点击事件
  thisChart.off("click");
  thisChart.on("click",function(param){
    if(param.name=='建筑物'){
      //跳转
      router.push({
        path: "/disasterVulnerManagement/compreVisualAnalysis/buildingCompreSta",
        query: {
          province: selectProvince
        }
      });
    }else if(param.name=='生命线工程'){
      //跳转
      router.push({
        path: "/disasterVulnerManagement/compreVisualAnalysis/lifelineCompreSta"});
    }else if(param.name=='重大工程设施'){
      //跳转
      router.push({path: "/disasterVulnerManagement/compreVisualAnalysis/majorCompreSta"});
    }
  });
}

</script>

<style lang="scss" scoped>
.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}
.map-echartDiv {
  position:absolute;
  top:20px;
  right:20px;
  width:500px;
  height:500px;
  box-shadow: 0px 0px 20px #414d74;
  border:2px solid #e5ebf7;
  border-radius:8px;
  background:#ffffff;
  padding:20px;
}
</style>
